<template>
  <div
    v-if="loaded"
    class="app-container"
  >
    <page-header
      title="用户管理"
      desc="系统前端用户设置及管理"
    />
    <gridview
      ref="gridView"
      :api-service="apiService"
      :grid-config="configData.gridConfig"
      :grid-handles="configData.gridHandles"
      :filter-config="configData.filterConfig"
      :bind-params="params"
      :grid-edit-width="100"
      :is-async="true"
      @action="onAction"
    />
    <!--触发的表单弹窗-->
    <el-dialog
      v-if="dialogFormVisible"
      :visible.sync="dialogFormVisible"
      :title="dialogTitle"
      append-to-body
      destroy-on-close
    >
      <el-scrollbar
        style="height:100%"
        wrap-style="overflow-x:hidden;"
      >
        <adminer-form
          ref="dialogForm"
          :user="currentRow"
          :action-visible="false"
          @submit="onRefresh"
        />
      </el-scrollbar>
      <template slot="footer">
        <el-button
          type="primary"
          @click="onDialogSubmit"
        >
          提交
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import PageHeader from '@/components/PageHeader'
import Gridview from '@/components/Gridview'
import AdminerForm from './AdminerForm'
import GridApiService from '@/api/grid'

export default {
  name: 'Brand',
  components: {
    PageHeader,
    Gridview,
    AdminerForm
  },
  data() {
    return {
      loaded: false,
      configData: {},
      listQuery: {},
      currentRow: null,
      data: null,
      apiService: new GridApiService('/user/default'),
      dialogFormVisible: false,
      dialogTitle: '用户授权-设置管理'
    }
  },
  computed: {
    params() {
      return Object.assign({}, this.listQuery)
    }
  },
  watch: {
    data() {
      this.configData = this.data
      this.loaded = true
    }
  },
  created() {},
  mounted() {
    this.loadGridModel()
  },
  methods: {
    loadGridModel() {
      this.apiService.config().then(response => {
        const { data } = response
        this.data = data.config
        this.dialogFormVisible = data.dialog.visible
        this.dialogTitle = data.dialog.title
      })
    },
    onImport() {
      this.$router.push({
        path: '/staff/manage/import'
      })
    },
    onAction(name, row) {
      if (name === 'update') {
        this.currentRow = row
        this.dialogFormVisible = true
      }
    },
    onRefresh() {
      console.log('onRefresh')
      this.dialogFormVisible = false
      this.listQuery = {}
    },
    onDialogSubmit() {
      var $el = this.$refs
      if ($el.dialogForm) {
        $el.dialogForm.onSubmit()
      } else {
        console.log('refs:', $el)
      }
    }
  }
}
</script>
